<template>
  <div>
    <div v-show="look">
      <!-- <p>宠物知识查看</p> -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" width="500">
        </el-table-column>

        <!-- <el-table-column
      prop="content"
      label="地址">
    </el-table-column> -->
        <el-table-column prop="release_time" label="发布日期" width="180">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="open(scope.row.content)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="hide" class="h">
      <el-col >
         <mavon-editor   :editable="false" v-model="contents" ></mavon-editor>
      </el-col>

      <el-button
        type="primary"
        @click="returns"
        style="margin-top: 3%; margin-left: 40%; width: 10%"
        >返回</el-button
      >
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      
      contents: "",
      hide: false,
      look: true,
      tableData: [],
    };
  },
  methods: {
    returns() {
      this.hide = false;
      this.look = true;
    },
    open(content) {
      console.log(content);
      this.contents = content;
      this.hide = true;
      this.look = false;
    },
    //查询文章
    init() {
      axios
        .get("http://localhost:9091/pet-knowledge/dogknowledge/getAll")

        .then((resp) => {
          console.log(resp);
          this.tableData = resp.data.data;
          if (resp.data.code == 200) {
            this.$message.success("查询成功");
          } else {
            this.$message.info("查询失败");
          }
        });
    },
  },
  mounted() {
    this.init();
  },
  computed: {},
};
</script>
<style scoped>
.h {
  height: 80%;
}
</style>
